<template>
	<div>
		<div class="weex-search">
			<div class="weex-col">
				<div class="weex-col-3-8 weex-select-wrap" >
					<select class="weex-select small-size" v-model="selected" @change="selectChange">
						<option class="weex-select-option" id="01" value="01">企业审核</option>
						<option class="weex-select-option" id="02" value="02">小区审核</option>
						<option class="weex-select-option" id="03" value="03">代理关系审核</option>
						<option class="weex-select-option" id="04" value="04">企业版审核</option>
					</select>
				</div>
				<div class="weex-col-4-8">
					<input type="text" placeholder="请输入" class="search weex-search-input small-size" @focus="focusText" value="" @input="changeKeys" />
				</div>
				<div class="weex-col-1-8" v-show="focusStatus==true">
					<a class="search-button weex-search-button" href="#">
						<text class="search-text  weex-search-button-text small-size" @click="search">搜索</text>
					</a>
				</div>
			</div>
		</div>
		<scroller class="scroller">
			<div v-if="list.length > 0">
				<div v-for="(v, i) in list" class="panel weex-col">
					<div class="schedule-col-3-4">
						<text class="name normal-size">{{v.name}}</text>
						<text class="type small-size">{{v.type}}</text>
						<text class="type small-size">{{v.time}}</text>
					</div>
					<div class="schedule-col-1-4" >
						<a class="schedule-button" href="#">
							<text class="schedule-btn-text normal-size" :id="v.id" @click="reviewed(v.id)">审核</text>
						</a>
					</div>
				</div>
			</div>
			<div  class="no-result-wrap">
				<text class="no-result normal-size">没有符合条件的待办事项</text>
			</div>
			<loading class="loading" @loading="onloading" :display="showLoading">
				<text class="indicator"></text>
			</loading>
		</scroller>
	</div>

</template>


<script>
	var dingtalk = require('weex-dingtalk');
	var modal = weex.requireModule('modal');
	//var eventType = '02';

	const getData =  '/approved/ajax/selectbypage';
	const turnPgae = _webpath+ '/approved/toapproved';

	export default {
		data: {
			keyWords: '',
			list: [],
			showLoading: 'hide',
			pageNum: 1,
			focusStatus: false,
			selected: eventType
		},

		mounted: function(){
			dingtalk.config({
				jsApiList : [ 'biz.util.openLink', 'biz.navigation.setTitle' ]
			});
			dingtalk.ready(function(){
				// 设置导航
				const dd = dingtalk.apis;
				dd.biz.navigation.setTitle({
					title: '待办事项'
				});
			});
			this.getList();
			//$('.weex-select-option').attr('selected', false);
			//$('#' + eventType)[0].selected = true;
//			var list  = [];
//			for(var i = 0; i < 2;i++){
//				list.push({
//					id: 'id'+i,
//					name: 'name'+i,
//					type: 'type'+i,
//					time: '2017-05-12'+i
//				});
//			}
//			this.list = list;
		},
		methods: {
			onloading (event) {
				this.showLoading = 'show';
				var self = this;
				modal.toast({ message: '数据正在加载中', duration: 1 });
				setTimeout(() => {
					self.pageNum ++;
				self.getList();
				this.showLoading = 'hide'
			}, 1500)
			},
			focusText: function(){
				this.focusStatus = true;
			},
			blurText: function(){
				//  this.focusStatus = false;
			},
			changeKeys: function (e) {
				e.stopPropagation();
				this.keyWords = e.value;
			},
			search: function(){
				this.focusStatus = false
				this.pageNum = 1;
				this.list = [];
				this.getList();
			},
			selectChange: function (e) {
				eventType = e.target.value;
				this.list = [];
				this.getList();
			},
			getList: function(){
				var self = this;
				var obj = {
					name: this.keyWords,
					pageSize: 10,
					pageNum: self.pageNum,
					eventType: eventType,
				};
				initFormAjax(getData,obj,true,'POST',function (data) {
					if(data.messageType == 'SUCCESS') {
						var list = data.valueObj;
						var temp = self.list;
						for(var i = 0; list&&i < list.length;i++){
							temp.push({
								id: list[i].id,
								name: list[i].name,
								type: list[i].evenTypeStr,
								evenType: list[i].evenType,
								time: list[i].submitTimeStr
							});
						}self.list = temp;
						if(temp.length==0) {
							$('.no-result-wrap').show();
						}else {
							$('.no-result-wrap').hide();
						}
					}
					else if(data.messageType == 'FAIL') {
						modal.alert({
							message: data.messageContent,
							okTitle: '确定',
						}, function () {
							if(data.redirectUrl != '') {
								dingtalk.ready(function(){
									const dd = dingtalk.apis;
									dd.biz.util.openLink({
										url: _webpath + data.redirectUrl
									})
								})
							}
						});
					}
					else if(data.messageType == 'WARN') {
						modal.alert({
							message: data.messageContent,
							okTitle: '确定',
						}, function () {
							dingtalk.ready(function(){
								const dd = dingtalk.apis;
								dd.biz.util.openLink({
									url: _webpath + data.redirectUrl
								})
							})
						});
					}

				});

			},
			reviewed: function reviewed(id) {
				/*dingtalk.ready(function () {
					var dd = dingtalk.apis;
					//alert(_webpath + '/approved/toapproved' + '?approvedInfoId=' + id + '&eventType=' + eventType)
					dd.biz.util.openLink({
						url: _webpath + '/approved/toapproved' + '?approvedInfoId=' + id + '&eventType=' + eventType
					})
				});*/
				location.href = _webpath + '/approved/toapproved' + '?approvedInfoId=' + id + '&eventType=' + eventType
			}
		}
	}
</script>

<style scoped>
	.indicator {
		color: #888888;
		font-size: 37px;
		padding-top: 37px;
		padding-bottom: 37px;
		text-align: center;
	}
	.panel {
		width: 100%;
		padding: 15px 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
		align-items: center;
	}
	.schedule-col-3-4{
		flex:3;
		padding-left: 40px;
	}
	.schedule-col-1-4{
		flex:1;
	}
	.name {
		padding: 2px 0;
	}
	.type {
		padding: 3px 0;
		color: #999;
	}
	.schedule-button {
		width: 120px;
	//   padding: 0 10px;
		border-radius: 8px;
		border-width: 1px;
		border-style: solid;
		border-color: #108EE9;
		background-color: #fff;
	}
	.schedule-btn-text {
		color: #108EE9;
		text-align: center;
	}
	.no-result-wrap {
		display: none;
		margin-top: 80px;
	}
	.no-result{
		color: #666;
		line-height: 75px;
		text-align: center;
	}
	.loading {
		justify-content: center;
	}
</style>